<html>
    <head>
        <script src="schemio-standalone.js"></script>
        <link rel="stylesheet" href="schemio-standalone.css"/>
        <link rel="stylesheet" href="syntax-highlight.css"/>
        <style>
            .app-container {
                text-align: center;
            }
            .ssc-container {
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div id="app" style="height: 600px;">loading</div>
        <script>
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    schemioViewScheme('#app', JSON.parse(this.responseText), {
                        sidePanelWidth  : 400,
                        title           : '',
                        zoom            : 100,
                        autoZoom        : true,
                        useMouseWheel   : true,
                        homeLink        : 'https://schem.io',
                        linkColor       : '#b0d8f5',
                        headerBackground: '#555',
                        headerColor     : '#f0f0f0',
                        headerEnabled   : true,
                        zoomButton      : true,
                        zoomInput       : true,
                    });
                }
            };

            xhttp.open('GET', 'scheme.json', true);
            xhttp.send();
        </script>
    </body>
</html>